import { useLayoutEffect, useState } from 'react';
import { Mask } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import socket from '@/socket';
import { useRecoilState } from 'recoil';
import { RoundDetailMaskState, RoundDetailState } from '@/state';
import LeftCom from './LeftCom';
import RightCom from './RightCom';

const RoundDetailMask: React.FC = () => {
  const [roundDetailMaskState, setRoundDetailMaskState] = useRecoilState(RoundDetailMaskState);
  const [roundDetailState = {},] = useRecoilState(RoundDetailState);
  const [active, setActive] = useState(0);
  const { playDateTime, orderNo } = roundDetailState;
  const getBetTime = (dateTIme: any) => {
    const date = new Date(dateTIme); // 乘以 1000 转换为毫秒

    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');

    const formattedDate = `${month}/${day}/${year}`;
    const formattedTime = `${hours}:${minutes}:${seconds}`;
    return formattedDate + " " + formattedTime;
  };
  const tabs = [
    { name: 'VALIDATION DATA', value: 0 },
    { name: 'GAME RESULT', value: 1 }
  ]
  return (
    <Mask
      opacity={.5}
      visible={roundDetailMaskState}
      onMaskClick={() => setRoundDetailMaskState(false)}
    >
      <div
        className={styles.RoundDetailMask}
      >
        <div className={styles.titleBox}>
          ROUND DETAILS
          <i className={styles.icon} onClick={() => { setRoundDetailMaskState(false) }}></i>
        </div>
        <div className={styles.content}>
          <div className={styles.titleFlex}>
            <div className={styles.time}>
              {playDateTime ? getBetTime(playDateTime) : '-'}
            </div>
            <div className={styles.infoId}>
              <span className={styles.grayId}>ID:</span>{orderNo || '-'}
            </div>
          </div>
          <div className={styles.tabs}>
            {
              tabs.map(({ name, value }) => (
                <div
                  key={value}
                  onClick={() => {
                    setActive(value)
                  }}
                  className={clsx(styles.tab, value === active && styles.active)}>
                  {name}
                </div>
              ))
            }
          </div>
          {
            active === 0 && <LeftCom />
          }
          {
            active === 1 && <RightCom />
          }
        </div>
      </div>
    </Mask>
  );
};

export default RoundDetailMask;
